<template>
  <div id="profile">
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:default>个人中心</template>
      <template v-slot:right></template>
    </nav-bar>

    <div class="user-info">
      <van-uploader :after-read="afterRead">
        <img v-lazy="user.avatar_url"/>
      </van-uploader>
      <div>
        <span v-if="isUpdateName" @click="isUpdateName=false">昵称：{{ user.name }}</span>
        <span v-else>昵称：<van-field class="nickField" v-model="user.name" placeholder="请输入昵称" @blur="setName" /></span>
        <span>登录名：{{ user.email }}</span>
        <span>个性签名：成就自己的只需一套精品</span>
      </div>
    </div>

    <div style="text-align: left">
      <van-cell title="我的订单" is-link @click="goTo('/order')"/>
      <van-cell title="我的收藏" is-link @click="goTo('/collect')"/>
      <van-cell title="账号管理" is-link @click="goTo('/setting')"/>
      <van-cell title="地址管理" is-link @click="goTo('/address')"/>
      <van-cell title="关于我们" is-link @click="goTo('/about')"/>
    </div>

    <div style="margin:15px">
      <van-button round block type="success" @click="tologout">退出登录</van-button>
    </div>

  </div>
</template>

<script>
import {ref, reactive, toRefs, onMounted} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {Toast} from 'vant';

import NavBar from "components/common/navbar/NavBar";
import {getUser, logout, setUserName, uploadAvatar} from "network/user";

export default {
  name: "Profile",
  components: {
    NavBar,
  },

  setup() {
    const state = reactive({
      user: {}
    })
    const router = useRouter()
    const store = useStore()
    const goTo = (path, query) => {
      router.push({path, query: query || {}})
    }
    const tologout = () => {
      logout().then(res => {
        if (res.status === 204) {
          Toast('登出成功')
          window.localStorage.setItem('token', '')
          store.commit('setIsLogin', false)
          setTimeout(() => router.push('/login'), 500)
        }
      })
    }

    // 图像上传
    const afterRead = file => {
      let fd = new FormData();
      fd.append('avatar', file.file)
      uploadAvatar(fd).then(res => {
        if (res.status === 200) {
          Toast.success('更换头像成功')
          state.user.avatar_url = res.avatar
        }
      })
    }

    // 昵称编辑
    const isUpdateName = ref(true)
    const setName = () => {
      setUserName(state.user.name).then(res => {
        if (res.status === 204) {
          Toast.success('修改昵称成功')
          isUpdateName.value = true
        }
      })
    }

    onMounted(() => {
      getUser().then(res => state.user = res)
    })

    return {
      ...toRefs(state), goTo, tologout, afterRead, isUpdateName, setName
    }
  }
}
</script>

<style scoped lang="scss">
.user-info {
  margin: 60px 15px 15px 15px;
  padding: 20px;
  display: flex;
  border-radius: 6px;
  background: linear-gradient(90deg, #31c7A7, #A1c7c7);
  box-shadow: 0 2px 5px #269090;

  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  .nickField {
    display: inline-block;
    width: 100px;
    height: 20px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
  }

  div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    margin-left: 10px;
    font-size: 12px;
    color: white;
  }
}
</style>